.nav-tree {
  h2 {
    margin-bottom: 1em;
    padding-bottom: 0.3em;
    border-bottom: $border;
  }

  .node {
    transition: 1s all;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(30px);
  }

  .node:target {
    height: auto;
    opacity: 1;
    transform: translateX(0px);
  }

  .node .back {
    width: 1em;
    margin-right: 0.3em;
    display: inline-block;
    opacity: 0.6;

    &:hover {
      opacity: 1;
    }
  }

  .branch {
    .content {
      @extend %box-radius;
      background: $c-bg-zebra;
      margin: 3em 0;
      padding: 2em 3em;
    }
    .links a {
      @extend %box-radius;

      font-size: 1.2em;
      display: block;
      padding: 1em;
      padding-left: 30px;

      @include transition;

      &:hover {
        color: $c-primary-over;
        background: $c-primary;
      }
    }
  }

  .leaf {
    a {
      color: #3893e8 !important;
    }

    .content {
      padding: 1em 0;
      font-size: 1.1em;

      p,
      ul {
        margin-bottom: 1em;
      }

      li {
        list-style: disc inside;
      }
    }
  }
}
